<template>
  <div class="Draggable">
      <draggable v-model="colors" @update="datadragEnd" :options="{ animation: 500 }">
        <transition-group>
          <div v-for="element in colors" :key="element.type" class="drag-item">
              <div class="hour-div" v-if='element.type=="font"'>
                <div>1111</div>
              </div>
          </div>
        </transition-group>
      </draggable>
    </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
    data () {
        return {
            msg: '这是测试组件',
            colors: [
                {
                    type: 'font'
                },
                {
                    type: '列表2'
                },
                {
                    type: '列表3'
                },
                {
                    type: '列表4'
                },
                {
                    type: '列表5'
                },
                {
                    type: '列表6'
                },
                {
                    type: '列表7'
                },
                {
                    type: '列表8'
                },
                {
                    type: '列表9'
                }
            ],
            startArr: [],
            endArr: [],
            count: 0
        }
    },
    components: {
    // eslint-disable-next-line no-undef
        draggable
    },
    methods: {
        getdata (evt) {
            console.log(evt.draggedContext.element.type)
        },
        datadragEnd (evt) {
            evt.preventDefault()
            console.log('拖动前的索引 :' + evt.oldIndex)
            console.log('拖动后的索引 :' + evt.newIndex)
            console.log(this.colors)
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.test {
  border: 1px solid #ccc;
}
.drag-item {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin: auto;
  position: relative;
  background: rgb(68, 226, 5);
  margin-top: 20px;
  color: #fff;
}
.ghostClass {
  opacity: 1;
}
.bottom {
  width: 200px;
  height: 50px;
  position: relative;
  background: blue;
  top: 2px;
  left: 2px;
  transition: all 0.5s linear;
}
</style>
